<template>
	<view class="creative-tabbar">
		<view class="tabbar-shadow" :class="['shadow-color-' + localCurrentIndex, { 'shadow-animate': shadowAnimating }]"></view>

		<view class="tabbar-container" :class="['tab-bg-' + localCurrentIndex, { 'container-animate': containerAnimating }]">
			<view class="tabbar-highlight" :class="{ 'highlight-animate': containerAnimating }"></view>
			<view class="tabbar-glass-effect" :class="{ 'glass-animate': containerAnimating }"></view>
			<view class="background-transition-overlay" :class="['overlay-color-' + localCurrentIndex, { 'overlay-animate': containerAnimating }]"></view>

			<view class="tab-content">
				<view
					v-for="(item, index) in tabItems"
					:key="index"
					class="tab-item layered-tab"
					:class="{
						active: localCurrentIndex === index,
						'tab-dark': true,
						'tab-item-0': index === 0,
						'tab-item-1': index === 1,
						'tab-item-2': index === 2,
						'tab-item-3': index === 3,
					}"
					@click="handleTabClick(index)">
					<view class="icon-wrapper">
						<view class="layer-container">
							<view class="layer-effect">
								<view class="layer-item" v-for="n in 4" :key="n"></view>
								<view class="icon-container">
									<text :class="item.icon" class="tab-icon"></text>
									<view class="filled-background"></view>
									<view
										class="icon-glow"
										:class="{
											'active-glow': localCurrentIndex === index,
										}"></view>
								</view>
							</view>
						</view>
						<text
							class="tab-label"
							:class="{
								'show-label': localCurrentIndex === index,
							}">
							{{ item.name }}
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "CreativeTabBar",
	props: {
		items: {
			type: Array,
			default: function () {
				return [];
			},
		},
		currentIndex: {
			type: Number,
			default: 0,
		},
		activeColor: {
			type: String,
			default: "#3b82f6",
		},
		normalColor: {
			type: String,
			default: "#94a3b8",
		},
	},
	data() {
		return {
			localCurrentIndex: this.currentIndex,
			shadowAnimating: false,
			containerAnimating: false,
			previousIndex: 0,

			defaultItems: [
				{
					name: "首页",
					icon: "iconfont tn-icon-home",
					color: "#4f46e5",
				},
				{
					name: "统计",
					icon: "iconfont tn-icon-discover",
					color: "#10b981",
				},
				{
					name: "消息",
					icon: "iconfont tn-icon-message",
					color: "#f59e0b",
				},
				{
					name: "我的",
					icon: "iconfont tn-icon-my",
					color: "#ec4899",
				},
			],

			colorSchemes: [
				{
					main: "#4f46e5",
					light: "#6366f1",
					dark: "#4338ca",
					bg: "rgba(79, 70, 229, 0.1)",
				},
				{
					main: "#10b981",
					light: "#34d399",
					dark: "#059669",
					bg: "rgba(16, 185, 129, 0.1)",
				},
				{
					main: "#f59e0b",
					light: "#fbbf24",
					dark: "#d97706",
					bg: "rgba(245, 158, 11, 0.1)",
				},
				{
					main: "#ec4899",
					light: "#f472b6",
					dark: "#db2777",
					bg: "rgba(236, 72, 153, 0.1)",
				},
			],
			defaultActiveColor: "#3b82f6",
			idCounter: 0,
		};
	},
	computed: {
		tabItems() {
			if (this.items && this.items.length > 0) {
				const result = [];
				for (let i = 0; i < this.items.length; i++) {
					const item = this.items[i];
					if (!item.color) {
						result.push({
							id: this.generateId(),
							name: item.name,
							icon: item.icon,
							color: this.colorSchemes[i % this.colorSchemes.length].main,
						});
					} else {
						result.push({
							id: this.generateId(),
							name: item.name,
							icon: item.icon,
							color: item.color,
						});
					}
				}
				return result;
			} else {
				const result = [];
				for (let i = 0; i < this.defaultItems.length; i++) {
					const item = this.defaultItems[i];
					result.push({
						id: this.generateId(),
						name: item.name,
						icon: item.icon,
						color: item.color,
					});
				}
				return result;
			}
		},

		currentItemColor() {
			if (this.tabItems.length > this.localCurrentIndex && this.tabItems[this.localCurrentIndex]) {
				return this.tabItems[this.localCurrentIndex].color || this.activeColor || this.defaultActiveColor;
			}
			return this.activeColor || this.defaultActiveColor;
		},
	},
	watch: {
		currentIndex: {
			handler(newVal) {
				if (this.localCurrentIndex !== newVal) {
					this.previousIndex = this.localCurrentIndex;
					this.localCurrentIndex = newVal;
					this.playTabSwitchAnimations();
				}
			},
			immediate: true,
		},
	},
	mounted() {
		this.$nextTick(() => {
			setTimeout(() => {
				this.playTabSwitchAnimations();
			}, 300);
		});
	},
	methods: {
		handleTabClick(index) {
			if (this.localCurrentIndex !== index) {
				this.previousIndex = this.localCurrentIndex;
				this.localCurrentIndex = index;
				this.$emit("changeTabbar", index);
				this.playTabSwitchAnimations();
			}
		},

		generateId() {
			return "item-" + this.idCounter++;
		},

		playTabSwitchAnimations() {
			this.playShadowAnimation();
			this.playContainerAnimation();
		},

		playShadowAnimation() {
			if (this.shadowAnimating) {
				this.shadowAnimating = false;
				setTimeout(() => {
					this.startShadowAnimation();
				}, 10);
			} else {
				this.startShadowAnimation();
			}
		},

		playContainerAnimation() {
			if (this.containerAnimating) {
				this.containerAnimating = false;
				setTimeout(() => {
					this.startContainerAnimation();
				}, 10);
			} else {
				this.startContainerAnimation();
			}
		},

		startShadowAnimation() {
			this.shadowAnimating = true;
			setTimeout(() => {
				this.shadowAnimating = false;
			}, 800);
		},

		startContainerAnimation() {
			this.containerAnimating = true;
			setTimeout(() => {
				this.containerAnimating = false;
			}, 650);
		},
	},
};
</script>

<style lang="scss" scoped>
.creative-tabbar {
	--bg-dark: rgba(40, 40, 40, 0.85);
	--text-dark: #e2e8f0;
	--shadow-dark: rgba(0, 0, 0, 0.15);

	--tab-color-0: #4f46e5;
	--tab-color-light-0: #6366f1;
	--tab-color-dark-0: #4338ca;
	--tab-rgba-0: 79, 70, 229;

	--tab-color-1: #10b981;
	--tab-color-light-1: #34d399;
	--tab-color-dark-1: #059669;
	--tab-rgba-1: 16, 185, 129;

	--tab-color-2: #f59e0b;
	--tab-color-light-2: #fbbf24;
	--tab-color-dark-2: #d97706;
	--tab-rgba-2: 245, 158, 11;

	--tab-color-3: #ec4899;
	--tab-color-light-3: #f472b6;
	--tab-color-dark-3: #db2777;
	--tab-rgba-3: 236, 72, 153;
	--transition-default: all 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
	--transition-quick: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
	--transform-active: translateY(-16rpx) rotate(-15deg) skew(10deg) translateZ(10px);
	--transform-pressed: scale(0.85) rotate(-15deg) skew(10deg) translateZ(5px);

	position: fixed;
	width: 90%;
	bottom: 40rpx;
	bottom: calc(40rpx + constant(safe-area-inset-bottom) / 3);
	bottom: calc(40rpx + env(safe-area-inset-bottom) / 2);
	left: 5%;
	right: 5%;

	text {
		overflow: visible;
	}

	.tabbar-shadow {
		position: absolute;
		bottom: -8rpx;
		left: 40%;
		right: 40%;
		height: 15rpx;
		background: #ffffff;
		filter: blur(15px);
		border-radius: 100%;
		z-index: 1;
		transition: all 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
		transform-origin: center;
		opacity: 0.3;

		&::before,
		&::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius: 100%;
			opacity: 0;
			transition: all 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
		}

		&.shadow-animate {
			left: 40rpx;
			right: 40rpx;
			animation: shadow-spread 0.65s cubic-bezier(0.2, 0.9, 0.3, 1.3);

			&::before {
				animation: shadow-pulse-1 0.85s cubic-bezier(0.2, 0.9, 0.3, 1.3);
			}

			&::after {
				animation: shadow-pulse-2 1.05s cubic-bezier(0.2, 0.9, 0.3, 1.3);
			}
		}

		@for $i from 0 through 3 {
			&.shadow-color-#{$i} {
				background: rgba(var(--tab-rgba-#{$i}), 0.25);

				&::before,
				&::after {
					background: rgba(var(--tab-rgba-#{$i}), 0.15);
				}
			}
		}
	}

	.tabbar-container {
		position: relative;
		height: 130rpx;
		border-radius: 30rpx;
		background-color: #ffffff;
		box-shadow: 10rpx 10rpx 20rpx rgba(174, 174, 192, 0.4), -10rpx -10rpx 20rpx rgba(255, 255, 255, 0.7), inset 1rpx 1rpx 2rpx rgba(255, 255, 255, 0.3);
		border: none;
		transition: var(--transition-default);

		&.container-animate {
			animation: container-pulse 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.3);
		}

		.tabbar-highlight {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 50%;
			background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0) 100%);
			border-radius: 32rpx;
			z-index: 2;
			pointer-events: none;
			opacity: 0.7;
			transition: opacity 0.5s ease;

			&.highlight-animate {
				animation: highlight-flash 0.8s ease;
			}
		}

		.tabbar-glass-effect {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
			border-radius: 32rpx 32rpx 0 0;
			z-index: 1;
			pointer-events: none;
			transition: opacity 0.5s ease;

			&.glass-animate {
				animation: glass-shimmer 0.8s ease;
			}
		}

		.background-transition-overlay {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			opacity: 0;
			border-radius: 32rpx;
			z-index: 0;
			pointer-events: none;

			&.overlay-animate {
				animation: overlay-fade 0.6s ease;
			}

			@for $i from 0 through 3 {
				&.overlay-color-#{$i} {
					background: radial-gradient(circle at center, rgba(var(--tab-rgba-#{$i}), 0.15) 0%, rgba(var(--tab-rgba-#{$i}), 0.05) 60%, rgba(var(--tab-rgba-#{$i}), 0) 100%);
				}
			}
		}

		@for $i from 0 through 3 {
			&.tab-bg-#{$i} {
				// 图鸟温馨提醒，这里改底部导航的底色，这里加了毛玻璃
				background: #f8f7f8;
				// 毛玻璃
				// background: #FFFFFF80;
				// backdrop-filter: blur(20rpx);
				// -webkit-backdrop-filter: blur(20rpx);
				border: none;
				box-shadow: 10rpx 10rpx 20rpx rgba(174, 174, 192, 0.4), -10rpx -10rpx 20rpx rgba(255, 255, 255, 0.7), inset 0 0 5rpx rgba(var(--tab-rgba-#{$i}), 0.1);

				&::after {
					content: "";
					position: absolute;
					bottom: 0;
					left: 20%;
					right: 20%;
					height: 4rpx;
					background: linear-gradient(to right, transparent, var(--tab-color-#{$i}), transparent);
					border-radius: 4rpx;
					z-index: 3;
				}
			}
		}

		.tab-content {
			position: relative;
			display: flex;
			width: 100%;
			height: 100%;
			z-index: 10;
			padding: 10rpx 0;

			.tab-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				position: relative;
				z-index: 12;
				transition: var(--transition-default);
				overflow: visible;
				margin-top: 25rpx;

				@for $i from 0 through 3 {
					&.tab-item-#{$i} {
						&.active .layer-item {
							border-color: var(--tab-color-#{$i});
							box-shadow: 0 2rpx 8rpx rgba(var(--tab-rgba-#{$i}), 0.5);
						}

						&.active .icon-container .filled-background {
							background-color: var(--tab-color-#{$i});
							background-image: linear-gradient(135deg, var(--tab-color-#{$i}) 0%, var(--tab-color-light-#{$i}) 100%);
						}

						&.active .tab-label {
							color: var(--tab-color-#{$i});
							text-shadow: 0 0 15rpx rgba(var(--tab-rgba-#{$i}), 0.4);
						}
					}
				}

				&.tab-dark {
					color: var(--text-dark);

					.layer-item {
						border: 1px solid rgba(226, 232, 240, 0.3);
						background: rgba(0, 0, 0, 0.2);
					}
				}

				.icon-wrapper {
					display: flex;
					flex-direction: column;
					align-items: center;
					position: relative;
					height: 120rpx;
					transform-style: preserve-3d;

					.layer-container {
						position: relative;
						width: 65rpx;
						height: 65rpx;
						transition: var(--transition-default);
						margin-bottom: 15rpx;
						transform-style: preserve-3d;

						.layer-effect {
							position: relative;
							width: 100%;
							height: 100%;

							.layer-item {
								position: absolute;
								top: 0;
								left: 0;
								width: 100%;
								height: 100%;
								border-radius: 14rpx;
								transition: var(--transition-default);
								opacity: 0.2;
								box-shadow: 3rpx 3rpx 6rpx var(--neumorphic-shadow-dark), -3rpx -3rpx 6rpx var(--neumorphic-shadow-light);
							}

							.icon-container {
								position: absolute;
								top: 0;
								left: 0;
								width: 100%;
								height: 100%;
								display: flex;
								justify-content: center;
								align-items: center;
								border-radius: 14rpx;
								z-index: 5;
								transition: var(--transition-default);
								overflow: hidden;
								box-shadow: 5rpx 5rpx 10rpx rgba(174, 174, 192, 0.4), -5rpx -5rpx 10rpx rgba(255, 255, 255, 0.7), inset 1rpx 1rpx 2rpx rgba(255, 255, 255, 0.3);

								.tab-icon {
									font-size: 32rpx;
									color: white;
									transition: var(--transition-default);
									position: relative;
									z-index: 2;
									transform: translateZ(2px);
									text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
								}

								.filled-background {
									position: absolute;
									top: auto;
									bottom: 0;
									left: 0;
									width: 100%;
									height: 0;
									transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1);
									z-index: 1;
									transform: translateZ(1px);
								}

								.icon-glow {
									position: absolute;
									top: 50%;
									left: 50%;
									width: 0;
									height: 0;
									border-radius: 50%;
									background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.2) 60%, rgba(255, 255, 255, 0) 70%);
									filter: blur(1px);
									transform: translate(-50%, -50%) translateZ(0);
									opacity: 0;
									transition: var(--transition-default);
									z-index: 1;
									pointer-events: none;

									&.active-glow {
										width: 180%;
										height: 180%;
										opacity: 0.5;
										animation: pulse-glow 2.5s infinite;
									}
								}
							}
						}
					}

					.tab-label {
						font-size: 24rpx;
						text-align: center;
						max-width: 100%;
						overflow: visible;
						white-space: nowrap;
						display: inline-block;
						position: absolute;
						bottom: 0;
						opacity: 0;
						transform: translateY(10rpx) translateZ(3px);
						transition: var(--transition-default);
						z-index: 3;
						font-weight: 600;
						letter-spacing: 0.5rpx;

						&.show-label {
							opacity: 1;
							transform: translateY(0) translateZ(3px);
							bottom: 10rpx;
							margin-left: 10rpx;
						}
					}
				}

				&.active {
					.icon-wrapper {
						.layer-container {
							transform: var(--transform-active);
							animation: float 3s ease-in-out infinite;

							.layer-effect {
								.layer-item {
									&:nth-child(1) {
										opacity: 0.2;
										transform: translateZ(1px);
									}

									&:nth-child(2) {
										opacity: 0.4;
										transform: translate(5rpx, -5rpx) translateZ(3px);
									}

									&:nth-child(3) {
										opacity: 0.6;
										transform: translate(10rpx, -10rpx) translateZ(5px);
									}

									&:nth-child(4) {
										opacity: 0.8;
										transform: translate(15rpx, -15rpx) translateZ(7px);
									}
								}

								.icon-container {
									transform: translate(20rpx, -20rpx) translateZ(10px);

									.filled-background {
										height: 100%;
									}

									&::before {
										content: "";
										position: absolute;
										top: -50%;
										left: -100%;
										width: 80%;
										height: 200%;
										background: rgba(255, 255, 255, 0.3);
										transform: rotate(45deg);
										opacity: 0;
										z-index: 3;
										pointer-events: none;
										animation: shine 3s infinite;
									}

									.tab-icon {
										transform: rotate(15deg) translateZ(3px);
										animation: twirl 5s ease-in-out infinite;
									}
								}
							}
						}
					}
				}

				&:active:not(.active) {
					.icon-wrapper {
						.layer-container {
							transform: var(--transform-pressed);
							transition: var(--transition-quick);
						}

						.tab-label {
							transform: scale(0.95) translateZ(2px);
						}
					}
				}
			}
		}
	}
}

@keyframes pulse-glow {
	0%,
	100% {
		opacity: 0.5;
		transform: translate(-50%, -50%) scale(1);
	}

	50% {
		opacity: 0.7;
		transform: translate(-50%, -50%) scale(1.3);
	}
}

@keyframes float {
	0%,
	100% {
		transform: translateY(-16rpx) rotate(-15deg) skew(10deg) translateZ(10px);
	}

	50% {
		transform: translateY(-22rpx) rotate(-15deg) skew(10deg) translateZ(12px);
	}
}

@keyframes twirl {
	0%,
	100% {
		transform: rotate(15deg) translateZ(3px);
	}

	25% {
		transform: rotate(30deg) translateZ(4px);
	}

	75% {
		transform: rotate(0deg) translateZ(3px);
	}
}

@keyframes shine {
	0% {
		transform: rotate(45deg) translateX(-120%) translateZ(0);
		opacity: 0;
	}

	30% {
		opacity: 0.3;
	}

	100% {
		transform: rotate(45deg) translateX(120%) translateZ(0);
		opacity: 0;
	}
}

@keyframes shadow-spread {
	0% {
		left: 40%;
		right: 40%;
		opacity: 0.2;
		filter: blur(10px);
		transform: scaleX(0.15);
	}

	50% {
		opacity: 1;
		filter: blur(25px);
		transform: scaleX(1.1);
	}

	75% {
		opacity: 0.7;
	}

	100% {
		left: 40rpx;
		right: 40rpx;
		opacity: 0.5;
		filter: blur(15px);
		transform: scaleX(1);
	}
}

@keyframes shadow-pulse-1 {
	0% {
		opacity: 0;
		transform: scale(0.6);
		filter: blur(10px);
	}

	40% {
		opacity: 0.7;
		transform: scale(1.4);
		filter: blur(30px);
	}

	100% {
		opacity: 0;
		transform: scale(1.8);
		filter: blur(10px);
	}
}

@keyframes shadow-pulse-2 {
	0% {
		opacity: 0;
		transform: scale(0.3);
		filter: blur(5px);
	}

	50% {
		opacity: 0.5;
		transform: scale(1.6);
		filter: blur(25px);
	}

	100% {
		opacity: 0;
		transform: scale(2);
		filter: blur(15px);
	}
}

@keyframes container-pulse {
	0% {
		transform: scale(0.98);
	}

	50% {
		transform: scale(1.02);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes highlight-flash {
	0% {
		opacity: 0.5;
	}

	50% {
		opacity: 0.9;
	}

	100% {
		opacity: 0.7;
	}
}

@keyframes glass-shimmer {
	0% {
		opacity: 0.7;
		background-position: 0% 0%;
	}

	50% {
		opacity: 1;
		background-position: 100% 100%;
	}

	100% {
		opacity: 0.7;
		background-position: 0% 0%;
	}
}

@keyframes overlay-fade {
	0% {
		opacity: 0;
		transform: scale(0.8);
	}

	50% {
		opacity: 1;
		transform: scale(1.1);
	}

	100% {
		opacity: 0;
		transform: scale(1.2);
	}
}
</style>
